<template>
    <view>
        <a-tabs v-model:activeKey="activeKey" type="card">
            <a-tab-pane key="info" tab="基础信息">
                <BaseInfo :data="well"></BaseInfo>
            </a-tab-pane>
            <a-tab-pane key="survey" tab="测井记录">
                <survey :data="well" v-if="activeKey == 'survey'"></survey>
            </a-tab-pane>
            <a-tab-pane key="detail" tab="测前信息">
                <detail :data="well"></detail>
                <!-- <traject :data="well" v-if="activeKey == 'traject'"></traject> -->
            </a-tab-pane>
            <a-tab-pane key="traject" tab="井眼轨迹">
                <traject :data="well" v-if="activeKey == 'traject'"></traject>
                <!-- <traject :data="well" v-if="activeKey == 'traject'"></traject> -->
            </a-tab-pane>
            <a-tab-pane key="structure" tab="井身结构">
                <structure :data="well"></structure>
                <!-- <traject :data="well" v-if="activeKey == 'traject'"></traject> -->
            </a-tab-pane>
        </a-tabs>
    </view>
</template>
<script setup>
import emitter from '@/utils/mitt'
import traject from './traject'
import BaseInfo from './BaseInfo' 
import survey from './survey/index'
import structure from './structure/index'
import detail from './detail/index'
import { queryOne } from '@/api/well/well.js'
const well = ref(null)
const activeKey = ref('info')
const props = defineProps({
    value: {
        type: String
    }
})
// 监听数据变化
watch(() => props.value, (newVal, oldVal) => {
    fetchData()
})
// 获取油井信息
function fetchData() {
    queryOne(props.value).then(res => {
        well.value = res
        console.log('well.value', well.value)
        localStorage.setItem("wellData", JSON.stringify(well.value));
        emitter.emit('selected-well-confirm', res)
    })
}
fetchData()
</script>